$(function () {
    $('#submit').click(function () {
        var username = $('#username').val();
        var address = $('#address').val();
        var usertel = $('#usertel').val();
        var province = $('#province').val();
        var city = $('#city').val();
        var area = $('#area').val();

        // 判断用户信息是否为空
        if (!username.trim() && !address.trim() && !usertel.trim()) {
            $('#username_tips').html('收货人信息不能为空').addClass('blur');
            $('#address_tips').html('收货地址不能为空').addClass('blur');
            $('#usertel_tips').html('手机号不能为空 ').addClass('blur');
            return;
        }
        // 验证收货人信息
        var unameReg = /^[\dA-Za-z\u4E00-\u9FA5]{1,7}$/g;
        if (!unameReg.test(username)) {
            $('#username_tips').html('收货人姓名须由2-8位不能以数字开头的字符组成').addClass('blur');
            return;
        } else {
            $('#username_tips').html('收货人信息格式正确').addClass('green');
        }
        // 验证地址信息
        var adsReg = /^[\dA-Za-z\u4E00-\u9FA5]+$/ig;
        if (!adsReg.test(address)) {
            $('#address_tips').html('收货地址须由汉字、数字、字母组成不能包含非法字符').addClass('blur');
            return;
        } else {
            $('#address_tips').html('收货地址格式正确').addClass('green');
        }
        // 验证手机号码
        var telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!telReg.test(usertel)) {
            $('#usertel_tips').html('请输入正确格式的手机号').addClass('blur');
            return;
        } else {
            $('#usertel_tips').html('手机号格式正确').addClass('green');
        }

        $.ajax({
            type: "get",
            url: "./mockdata/city.json",
            dataType: 'json',
            success: function () {
                $('.sui_tips').show(1000);
                setTimeout(function () {
                    location.href = './subtotal.html';
                }, 2000)
            },
            error: function () {
                alert('请求失败');
            }
        })


    })



    var provinceSelect = document.querySelector('#province');
    var citySelect = document.querySelector('#city');
    var areaSelect = document.querySelector('#area');

    var xhr = new XMLHttpRequest();
    xhr.open('get', './mockdata/city.json', true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 获取所有省份的集合
            var provinceList = JSON.parse(xhr.responseText);
            // console.log(provinceList);
            // 初始化html的默认内容,避免一进去就显示省份
            var html = ' <option value="">请选择省份</option>';
            // 遍历省份集合,动态添加省份的option内容
            provinceList.forEach(item => {
                // console.log(item);
                html += ` <option value="${item.provinceId}">${item.name}</option>`;
            })
            provinceSelect.innerHTML = html;


            // 省份改变的函数
            provinceSelect.onchange = function () {
                // 每次点击省份时清空之前获取的省份及区县内容
                citySelect.innerHTML = '<option value="">请选择城市</option>';
                areaSelect.innerHTML = `<option value="">请选择区县</option>`;

                // 获取所选省份的id
                var provinceId = this.value;
                // console.log(provinceId);
                // 通过所选的省份id获取对应的省份对象
                var provinceObj = provinceList.filter(item => item.provinceId == provinceId)[0];
                // console.log(provinceObj);

                // 当省份对象存在时
                if (provinceObj) {
                    // 通过对应的省份对象获取对应的城市集合
                    var cityList = provinceObj.children;
                    // console.log(cityList);
                    // 初始化html的默认内容,避免一进去就显示城市
                    var html = '<option value="">请选择城市</option>';
                    // 遍历城市集合,动态添加城市的option内容
                    cityList.forEach(item => {
                        // console.log(item);
                        html += `<option value="${item.cityId}">${item.name}</option>`;
                    })
                    citySelect.innerHTML = html;


                    // 城市改变的函数
                    citySelect.onchange = function () {
                        // 每次点击城市时清空之前获取的城市内容
                        areaSelect.innerHTML = `<option value="">请选择区县</option>`;

                        // 获取所选城市的id
                        var cityId = this.value;
                        // console.log(cityId);
                        // 通过所选的城市id获取对应的城市对象
                        var cityObj = cityList.filter(item => item.cityId == cityId)[0];
                        // console.log(cityObj);
                        // 初始化html的默认内容,避免一进去就显示区县
                        var html = `<option value="">请选择区县</option>`;

                        // 当城市对象存在时
                        if (cityObj) {
                            // 通过对应的城市对象获取对应的区县集合
                            var areaList = cityObj.children;
                            // console.log(areaList);
                            // 遍历区县集合,动态添加区县的option内容
                            areaList.forEach(item => {
                                html += `<option value="${item.areaId}">${item.name}</option>`;
                            })
                            areaSelect.innerHTML = html;
                        }
                    }

                }
            }
        }
    }


})